<!-- 我的表格   -->

<template>
  <WebTable @select="toSelect">
    <RowCheckbox :grayed="grayedIdList" />

    <RowIndex />

    <RowText label="门禁点" bind="name" :minWidth="120" />

    <RowTree
      :label="`所在${CORE.MAP.REGION}`"
      bind="regionId, regionName"
      :dict="CORE.REGION.DICT"
      allName
      :minWidth="150"
    />

    <RowText label="所属控制器" bind="deviceName" :minWidth="120" />

    <RowStatus label="门禁点状态" width="auto" />

    <RowOperate :btns="['show']" :width="80" :onShow="map_openModal" />

    <template #page>
      已绑定 <b class="PrimaryColor">{{ authIdList.length }}</b> 个门禁点
    </template>
  </WebTable>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTable',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixModal('map', 'map_'), CORE.mixInfo()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 授权 ID 列表
     */
    authIdList() {
      return this.info.authList.map((item) => item.pointId)
    },

    /**
     * 置灰的 ID 列表
     */
    grayedIdList() {
      return this.info.authList.filter((item) => item.isParentAuth === 1).map((item) => item.pointId)
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听信息就绪
     */
    readyInfo(ready) {
      if (ready) this.param.idList = this.authIdList
    },

    /**
     * 监听提示就绪
     */
    readySubmit(ready) {
      ready && this.startInfo()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换复选
     */
    toSelect(idList) {
      const { infoParam: { organId }, authIdList } = this

      const bindIdList = idList.filter((id) => !authIdList.includes(id))
      const unbindIdList = authIdList.filter((authId) => !idList.includes(authId))

      this.setOne({ organId, bindIdList, unbindIdList })

      this.startSubmit()
    },
  },
}
</script>
